<template>
  <div class="main">
    <div class="form">
      <h2>樱桃管理运营支持平台</h2>
      <el-card style="width: 300px;">
        <!-- 表单 -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 每一个表单元素 -->
          <el-form-item
            label="用户名"
            prop="username"
          >
            <el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="密码"
            prop="rpassword"
          >
            <el-input
              type="password"
              v-model="ruleForm.rpassword"
              autocomplete="off"
            ></el-input>
          </el-form-item> -->
          <!-- 提交按钮 -->
          <el-form-item>
            <el-button
              type="success"
              @click="submitForm('ruleForm')"
            >登录</el-button>
            <el-button @click="$router.push('/register')">
              注册
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import url from '@/config/url'
export default {
  data() {
    // 自定义校验规则
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        if (this.ruleForm.username !== '') {
          callback()
        }
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
        // 密码长度为6-12
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error('密码长度为6-12!'))
      } else {
        callback()
      }
    }
    return {
      // 表单的数据
      ruleForm: {
        username: '',
        password: ''
        // rpassword: ''
      },
      // 配置规则
      rules: {
        // 校验的值:[{校验规则:自定义校验的方法,触发时机:失焦}]
        username: [{ validator: validateUsername, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }]
        // rpassword: [{ validator: validatePassword, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    // 监听键盘弹起事件 keycode 13 为回车键
    document.onkeyup = (event) => {
      var e = event || window.event
      if (e && e.keyCode == 13) {
        // console.log('回车')
        // 提交表单
        this.submitForm('ruleForm')
      }
    }
  },
  methods: {
    submitForm(formName) {
      console.log(formName)
      // $refs ref属性绑定  获取组件实例或者标签DOM对象
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验通过  调用接口 发送注册数据
          // alert('submit!');
          let data = {
            username: this.ruleForm.username,
            password: this.ruleForm.password
          }
          // 调用登录接口实现登录操作
          this.$http.post(url.login, data).then((res) => {
            console.log(res)
            if (res.data.code === 0) {
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                  // 存储用户信息到vuex创建的store中
                  this.$store.commit('saveUsername', res.data.data.username)
                  // 登录成功之后 跳转到后台管理页面
                  this.$router.push('/admin/dashboard')
                  // 方法一 在登录请求成功后存储token
                  // 存储token到localStorage中
                  // localStorage.setItem('token', res.data.token)
                  // 存储acl权限列表到localStorage中
                  // acl access controll list  访问控制列表
                  // localStorage存储只能存储字符串,数组和对象结构如何存储?
                  // 对象或者数组如何转为字符串?JSON序列化
                  localStorage.setItem('acl', JSON.stringify(res.data.data.acl))
                }
              })
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              })
            }
          })
        } else {
          // console.log('error submit!!');
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100vh;
  /* background: url('../assets/img/bg.jpg'); */
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F56d502b70b01f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672476611&t=b6863842464d171c3192b4dc66a069e7');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* h2 {
    color: white;
    background-color: rgba($color: #000000, $alpha: 0.7);
    border-radius: 10px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 300px;
    margin-bottom: 20px;
  } */
}
</style>